<template>
  <div class="condition-filter">
    <ul class="display-flex">
      <li
        @click="changeCondition(condition.id, condition.text)"
        v-for="condition in conditionList"
        track-by="id"
        :class="['flex1', 'li-item', { 'brandActive': activeStyle == condition.id }]">
        {{condition.text}}
      </li>
    </ul>
    <div class="active-border"></div>
  </div>
</template>

<script>
  export default{
    props: ['conditionList', 'activeIndex'],
    data () {
      var data = {}
      data.activeStyle = 0
      return data
    },
    created () {
      this.activeStyle = this.activeIndex || 0
    },
    methods: {
      changeCondition: function (id, text) {
        this.activeStyle = id
        this.$dispatch('changeCondition', id, text)
        if (this.conditionList.length === 2) {
          document.querySelector('.active-border').style.left = (id * 50) + 16.8 + '%'
        } else if (this.conditionList.length === 3) {
          document.querySelector('.active-border').style.left = (id * 33.33333) + 9 + '%'
        } else {
          document.querySelector('.active-border').style.left = (id * 25) + 3.8 + '%'
        }
      }
    },
    //
    watch: {
      activeStyle: function () {
        if (this.conditionList.length === 2) {
          document.querySelector('.active-border').style.left = (this.activeStyle * 50) + 16.8 + '%'
        } else if (this.conditionList.length === 3) {
          document.querySelector('.active-border').style.left = (this.activeStyle * 33.33333) + 9 + '%'
        } else {
          document.querySelector('.active-border').style.left = (this.activeStyle * 25) + 3.8 + '%'
        }
      },
      conditionList: function (val) {
        if (val.length === 3 && document.querySelector('.active-border').style.left === '') {
          document.querySelector('.condition-filter').style.marginTop = 0
          document.querySelector('.active-border').style.left = 9 + '%'
        }
      }
    },
    ready: function () {
      if (this.conditionList.length === 2) {
        document.querySelector('.active-border').style.left = 16.8 + '%'
      }
      if (this.conditionList.length === 3) {
        document.querySelector('.active-border').style.left = 9 + '%'
      }
    }
  }
</script>

<style lang="scss" scoped>
  $height: 6.9vh;
  div.condition-filter {
    position: relative;

    ul {
      width: 100%;
      height: $height;
      margin: 0;
      padding: 0;

      li {
        line-height: $height;
        text-align: center;
        /*color: rgba(102, 102, 102);*/
        color: #666666;

        &:last-child {
          border-right: none;
        }
      }
      .brandActive {
        position: relative;
        font-weight: 550;
        color: rgba(74, 144, 226, 1);
      }
    }

    .active-border {
      position: absolute;
      left: 3.8%;
      bottom: 0;
      width: 15%;
      height: 2px;
      border-radius: .2rem;
      background: url("") no-repeat center bottom;
      z-index: 1;
      transition: all .2s;
    }
  }
  .li-item{
    font-size: 0.28rem;
  }
</style>
